<template>
	<view class="recycle_price-container">
		<!-- Header -->
		<view class="recycle-header">
			<view class="recycle-header-content">
				<view class="recycle-price-title">您的商品预估价值:</view>
				<view class="recycle-price"><text style="font-size: 44rpx;">¥</text>{{ price || '0.00' }}</view>
				<!--                <view class="recycle-price--reprice">
                    <navigator hover-class="none" open-type="navigateBack" :delta="1">
                        重新预估
                    </navigator>
                </view> -->
			</view>
		</view>

		<!-- Main -->
		<view class="recycle_price-main">
			<template>
				<view class="recycle-process-title">商品估价</view>
				<!-- <view class="recycle-process"></view> -->
			</template>
			<!-- <template>
				<view class="lendlease-process-title"></view>
				
				<block v-for="item in lendleaseProcess" :key="item.index">
					<view class="lendlease-process-item">
						<view class="lendlease-process-item-l">
							<view class="lendlease-process-item-count">{{ item.index }}</view>
							<view class="lendlease-process-item-tranf">
								<u-image width="24" height="115" src="/bundle/static/images/huanzu_icon_step2.png" />
							</view>
						</view>
						
						<view class="lendlease-process-item-r">
							<view class="lendlease-process-item-title">{{ item.title }}</view>
							<view class="lendlease-process-item-desc">{{ item.desc }}</view>
							<u-image width="468" height="220" :src="item.image" />
						</view>
					</view>
				</block>
			</template> -->

			<view class="row image-content">
				<view class="video-box">
					<video src="" class="video"></video>
				</view>
				<image src="../../static/images/group_bg.png" mode="" class="img"></image>
				<image src="../../static/images/group_bg.png" mode="" class="img"></image>
			</view>
		</view>
		<text class="desc">
			*对方收到商品，质检通过后将会打款至您的账户余额
		</text>

		<!-- Widget -->
		<view class="recycle_price-widget">
			<view class="recycle_price-btn--goorder" @tap="goPlaceOrder">
				确认/寄出商品
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAssess
	} from '@/api/recycle.js';

	export default {
		data() {
			return {
				mode: '', // 回收 || 租赁
				payload: null, // 承载表单信息
				plat: null, // 收货地址信息
				price: '', // 评估价

				lendleaseProcess: [{
						index: '01',
						title: '提交订单',
						desc: '填写商品信息，上传图片凭证，提交订单',
						image: '/bundle/static/images/huanzu_step_img01.png'
					},
					{
						index: '02',
						title: '寄出商品',
						desc: '根据提供的地址，自行寄出商品',
						image: '/bundle/static/images/huanzu_step_img02.png'
					},
					{
						index: '03',
						title: '等待质检',
						desc: '商家收到商品，对商品进行质检',
						image: '/bundle/static/images/huanzu_step_img03.png'
					},
					{
						index: '04',
						title: '质检通过，等待打款',
						desc: '商家质检通过后，将打款至您的账户中',
						image: '/bundle/static/images/huanzu_step_img04.png'
					},
					{
						index: '05',
						title: '选择租期，重新租用',
						desc: '选择要租用的期数，按月/周还款',
						image: '/bundle/static/images/huanzu_step_img05.png'
					}
				]
			}
		},

		methods: {
			// 去下单
			goPlaceOrder() {
				uni.redirectTo({
					url: '/bundle/pages/recycle_order/recycle_order' +
						'?order=' + JSON.stringify(this.payload) +
						'&plat=' + JSON.stringify(this.plat) +
						'&price=' + this.price +
						'&mode=' + this.mode
				})
			}
		},

		onLoad(options) {
			this.mode = options.mode || 'recycle';
			const order = JSON.parse(options.order);
			this.payload = order;

			getAssess({
				re_id: order.re_id,
				item_ids: order.item_ids
			}).then(res => {
				const data = res.data;
				this.price = data.total_amount || '0.00';
				this.plat = data.plat || {};
			});
		}
	}
</script>

<style scoped>
	.recycle-header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		padding: 30rpx;
		background: url(../../static/images/huishou_price_banner.png) no-repeat;
		background-size: 100% 100%;
	}

	.recycle-header-content {
		position: relative;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
	}

	.recycle-price-title {
		font-size: 34rpx;
	}

	.recycle-price {
		font-size: 80rpx;
	}

	.recycle-price--reprice {
		position: absolute;
		right: 0;
		bottom: 1em;
		font-size: 26rpx;
	}

	.recycle_price-main {
		padding: 40rpx;
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	.recycle-process-title {
		padding-bottom: 20rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.recycle-process {
		position: relative;
		width: 100%;
		height: 76rpx;
		display: flex;
		justify-content: space-between;
		background: url(../../static/images/huishou_step.png) no-repeat;
		background-size: 100% 100%;
	}

	.lendlease-process-title {
		height: 50rpx;
		background: url(../../static/images/huanzu_title.png) no-repeat;
		background-size: contain;
		background-position: center;
	}


	.lendlease-process-item {
		display: flex;
		margin-top: 20rpx;
	}

	.lendlease-process-item-l {
		width: 65rpx;
		margin-right: 20rpx;
	}

	.lendlease-process-item-count {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 58rpx;
		font-size: 32rpx;
		font-weight: 500;
		background: url(../../static/images/huanzu_icon_step1.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
	}

	.lendlease-process-item-tranf {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.lendlease-process-item-title {
		height: 58rpx;
		line-height: 58rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.lendlease-process-item-desc {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}


	.recycle_price-widget {
		margin: 40rpx 30rpx 30rpx 30rpx;
	}

	.recycle_price-btn--goorder {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		border-radius: 50px;
		font-size: 34rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to left, #3187FD, #24A3FF);
	}

	.image-content {
		display: flex;
	}

	.image-content .video-box {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		overflow: hidden;
		position: relative;
		margin-right: 15rpx;
	}

	.image-content .video-box .video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.image-content .img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		margin-right: 15rpx;
	}

	.desc {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		margin-top: 32rpx;
		padding: 0 28rpx;
		display: inline-block;
	}
</style>